<!--
 * Description: FD Tab 组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/10 15:53
-->

<template>
  <div v-loading="isRequesting" class="fd-data-edit">
    <el-page-header content="查看" @back="goBack" />
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('FdData.fdBaseInfo')" name="first">
        <EcDataBaseView v-if="stateControl.first" :inputData="inputData" />
      </el-tab-pane>
      <el-tab-pane :label="$t('FdData.fdAppreoveEndList')" name="five">
        <EcEvaluationPane
          v-if="stateControl.five"
          :inputData="inputData"
          :shareDataList="shareDataList"
          :task-data="taskData"
          @cancel="cancel"
        />
      </el-tab-pane>
      <el-tab-pane :label="$t('FdData.fdSummary')" name="six">
        <EcSummary
          v-if="stateControl.six"
          :filterProps="['pbmTotalCostDelta', 'pbmCommitTotalCostDelta']"
          :shareDataList="shareDataList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import EcEvaluationPane from './EcEvaluationPane'
import EcDataBaseView from '../../components/EcDataBaseView'
import EcSummary from '../../components/EcSummary'
import { fdCostTaskHistory } from '@/api/ecdfc/cost'

export default {
  name: 'EcTabEvaluation',
  components: {
    EcDataBaseView,
    EcEvaluationPane,
    EcSummary
  },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    inputData: {
      type: Object,
      default: () => null
    },
    taskData: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      activeName: 'five',
      stateControl: {
        first: false,
        second: false,
        third: false,
        fourth: false,
        five: true,
        six: true
      },
      // 正在查询
      isRequesting: false,
      // 共享原数据
      shareDataList: []
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    goBack() {
      this.$emit('update:visible', false)
    },
    handleClick(tab, event) {
      this.stateControl[tab.name] = true
    },
    cancel() {
      this.$emit('cancel')
    },
    async pageDataInit() {
      try {
        this.isRequesting = true
        const res = await fdCostTaskHistory({
          fdId: this.inputData.fdId,
          version: this.inputData.version,
          taskId: this.taskData.taskId
        })
        this.shareDataList = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
